<template>
	<view class="hot-video-container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallBack" @up="upCallBack">
			<block v-for="(item,index) in videoList" :key="index">
				<hot-video-item :data='item' @click="hotItemClick"></hot-video-item>
			</block>
		</mescroll-body>		
	</view>
</template>

<script>
	import MescrollMixin from  '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import { getHotVideoList } from 'api/video'
	import {mapMutations} from 'vuex'
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				videoList:[],
				page:1,
				size:10,
				isInit:true,
				mescroll:null
			}
		},
		created() {
			
		},
		mounted() {
			this.mescroll=this.$refs.mescrollRef.mescroll
		},
		methods:{
			...mapMutations('video',['setVideoData']),
			//获取列表数据
			async loadHotVideoList(){				
				const { data:res } = await getHotVideoList({
					page:this.page,
					size:this.size
				})
				//判断是否为第一页数据
				if(this.page===1){
					this.videoList =res.list
				}else{
					this.videoList = [...this.videoList,...res.list]
				}
				
			},
			async mescrollInit(){
				await this.loadHotVideoList()
				this.isInit=false
				//结束上拉刷新、下拉加载
				this.mescroll.endSuccess()
			},
			async downCallBack(){
				if(this.isInit) return
				this.page = 1
				await this.loadHotVideoList()
				//结束上拉刷新、下拉加载
				this.mescroll.endSuccess()
			},
			async upCallBack(){
				if(this.isInit) return
				this.page += 1
				await this.loadHotVideoList()
				//结束上拉刷新、下拉加载
				this.mescroll.endSuccess()
			},
			//item点击事件
			hotItemClick(data){
				this.setVideoData(data)
				uni.navigateTo({ url:'/subpkg/pages/video-detail/video-detail' })
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.hot-video-container {
  background-color: $uni-bg-color-grey;
}
</style>
